<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="关联工单" name="first">
        <el-table :data="workorderList" row-key="workorderId" default-expand-all>
          <el-table-column label="工单编码" width="180" prop="workorderCode">
            <!-- <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleView(scope.row)"
                v-hasPermi="['mes:pro:workorder:query']">{{scope.row.workorderCode}}</el-button>
            </template>-->
          </el-table-column>
          <el-table-column label="工单名称" width="200" align="center" prop="workorderName" :show-overflow-tooltip="true" />
          <el-table-column label="工单来源" align="center" prop="orderSource">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mes_workorder_sourcetype" :value="scope.row.orderSource" />
            </template>
          </el-table-column>
          <!-- <el-table-column label="订单编号" width="140" align="center" prop="sourceCode">
            <template slot-scope="scope">
              {{sourceCode(scope.row)}}
            </template>
          </el-table-column>-->
          <el-table-column label="产品编号" width="120" align="center" prop="productCode" />
          <el-table-column label="产品名称" width="200" align="center" prop="productName" :show-overflow-tooltip="true" />
          <el-table-column label="规格型号" align="center" prop="productSpc" :show-overflow-tooltip="true">
            <!-- <template slot-scope="scope">
                <el-link type="primary" :underline="false" @click="openSpc(scope.row.productSpc)">规格详情</el-link>
            </template>-->
          </el-table-column>
          <el-table-column label="单位" align="center" prop="unitOfMeasure" />
          <el-table-column label="工单数量" align="center" prop="quantity" />
          <!-- <el-table-column label="调整数量" align="center" prop="quantityChanged" /> -->
          <!-- <el-table-column label="已排产数量" align="center" width="100px" prop="quantityScheduled" /> -->
          <el-table-column label="已生产数量" align="center" width="100px" prop="quantityProduced" />
          <el-table-column label="客户编码" align="center" prop="clientCode" />
          <el-table-column label="客户名称" align="center" prop="clientName" :show-overflow-tooltip="true" />
          <el-table-column label="需求日期" align="center" prop="requestDate" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.requestDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="单据状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.mes_order_status" :value="scope.row.status" />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="订单日志" name="second">订单日志</el-tab-pane>
      <!-- <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> -->
      <!-- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import { listWorkorder } from "@/api/mes/pro/workorder";
export default {
  name: "Workorder",
  dicts: ["mes_order_status"],
  data() {
    return {
      workorderList: [],
      activeName: "first",
    };
  },
  created() {
    const orderId = this.$route.params && this.$route.params.orderId;
    this.getWorkorderList(orderId);
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /** 查询生产工单列表 */
    getWorkorderList(orderId) {
      let param = { sourceCode: orderId };
      listWorkorder(param).then((response) => {
        this.workorderList = this.handleTree(
          response.data,
          "workorderId",
          "parentId"
        );
      });
    },
  },
};
</script>

<style>
</style>
